<template>
	<view class="content">
		<view class="top flexs1 bg-white">
			<view class="topa">
				<image class="topa_img topa_img1" src="../../static/img/sjxd.png"></image>
				<view class="top_name">手机下单</view>
			</view>
			<image class="jiantou" src="../../static/img/jiantou.png"></image>
			<view class="topa">
				<image class="topa_img" src="../../static/img/zffy.png"></image>
				<view class="top_name">支付费用</view>
			</view>
			<image class="jiantou" src="../../static/img/jiantou.png"></image>
			<view class="topa">
				<image class="topa_img topa_img3" src="../../static/img/smqy.png"></image>
				<view class="top_name">上门取衣</view>
			</view>
			<image class="jiantou" src="../../static/img/jiantou.png"></image>
			<view class="topa">
				<image class="topa_img" src="../../static/img/wlys.png"></image>
				<view class="top_name">物流运输</view>
			</view>
			<image class="jiantou" src="../../static/img/jiantou.png"></image>
			<view class="topa">
				<image class="topa_img topa_img3" src="../../static/img/znxh.png"></image>
				<view class="top_name">智能洗护</view>
			</view>
			<image class="jiantou" src="../../static/img/jiantou.png"></image>
			<view class="topa">
				<image class="topa_img" src="../../static/img/smsh.png"></image>
				<view class="top_name">上门送回</view>
			</view>
		</view>
		<view class="quyi bg-white">
			<view class="quyi_list flexs3" @click="goselectaddress">
				<image class="dizhi" src="../../static/img/dizhi.png"></image>
				<block v-if="addressinfo.length==0">
					<view class="quyi_name">请填写取衣信息</view>
				</block>
				<block v-else>
					<view class="dizhi_right">
						<view class="dz_name">
							<text>{{addressinfo.name}}</text>
							<text class="small">{{addressinfo.mobile}}</text>
						</view>
						<view class="address small">{{addressinfo.address}}</view>
					</view>
				</block>
			</view>
			<view class="quyi_list quyi_list1 flexs1">
				<view class="">预约取件日期</view>
				<picker class="times text-right flexs1" mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
					<text v-if="date == '选择取衣日期'" style="color: gray;">
						{{date}}
					</text>
					<text v-else>{{date}}</text>
					<text class="cuIcon-right text-gray"></text>
				</picker>
			</view>
			<view class="quyi_list quyi_list1 flexs1" @tap="showModal" data-target="bottomModal">
				<view class="">预约取件时间</view>
				<view class="times text-right flexs1">
					<input v-model="time" placeholder="选择取衣时间段" placeholder-class="pcss" disabled="true" />
					<text class="cuIcon-right text-gray"></text>
				</view>
			</view>
		</view>
		<view class="list bg-white">
			<view class="list_tit">大件物品</view>
			<radio-group class="block flexs3" @change="RadioChange">
				<view class="flexs3">
					<radio class="smallR orange" :class="radio==1?'checked':''" :checked="radio==1?true:false" value="1"></radio>
					<view class="title">无</view>
				</view>
				<view class="flexs3">
					<radio class="smallR orange" :class="radio==2?'checked':''" :checked="radio==2?true:false" value="2"></radio>
					<view class="title">地毯</view>
				</view>
				<view class="flexs3">
					<radio class="smallR orange" :class="radio==3?'checked':''" :checked="radio==3?true:false" value="3"></radio>
					<view class="title">其他</view>
				</view>
			</radio-group>
		</view>
		<!-- <view class="list list2 flexs1 bg-white">
			<view class="">
				<text>有保价商品</text>
				<text class="text-gray small" style="padding-left: 20upx;" @click="fineCleaning">保价规则</text>
			</view>
			<switch class="cyan" @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
		</view>
		<view class="list list2 flexs1 bg-white">
			<view class="">是否开具电子发票</view>
			<switch class="cyan" @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
		</view> -->
		<view class="list list2 flexs1 bg-white" @tap="showModal" data-target="shuomingM">
			<view class="">取送规则</view>
			<view>{{song_fee}}
			<text class="cuIcon-right text-gray"></text></view>
		</view>
		<view class="btns text-white text-bold text-center" @tap="showModal" data-target="Modal">确认下单</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar flexs1">
					<view class="action">
						<text class="cuIcon-close text-white"></text>
					</view>
					<view class="text-black">确认订单</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-black"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="price">
						<text>￥</text>
						<text class="bigs">{{song_fee}}</text>
					</view>
					<view class="btns text-white text-bold text-center" @click="makepayment">确认支付</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='shibaiM'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-black"></text>
					</view>
				</view>
				<view class="padding-xl">
					<image class="shibai_img" src="../../static/img/shibai.png"></image>
					<view>余额不足，支付失败</view>
					<view class="btns text-white text-bold text-center" @tap="wxPay" data-target="Modal">微信支付</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='shuomingM'?'show':''" @tap="hideModal">
			<view class="cu-dialog bg-white" @tap.stop="">
				<view class="padding-xl padding-xl2">
					<view class="flexs2">
						<text class="cuIcon-info"></text>
						<text>取送说明</text>
					</view>
					<view class="shuomings">
						<rich-text :nodes="takeinfo"></rich-text>
						<!-- <view class="small text-gray shuoming">1.本店只提供5公里以内服务</view>
						<view class="small text-gray shuoming">2.取送费5元</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar">
					<view class="action" @tap="hideModal">取消</view>
					<view class="action text-cyan" @click="qudingTime">确定</view>
				</view>
				<view class="padding-xl padding-xl3">
					<view class="time_list" @click="xuanzeTime(index,item)" :class="timeStu == index?'timeColor':''" v-for="(item, index) in timeList"
					 :key="index">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')
	export default {
		data() {
			return {
				modalName: null,
				radio: 'A',
				switchA: false,
				switchB: false,
				date: '选择取衣日期',
				time:'',//时间
				timeList:['8:00-12:00','12:00-14:00','14:00-16:00','16:00-18:00'],
				timeStu:'',
				times:'',
				song_fee:'',
				address_id: '',
				addressinfo: [],
				take_day: '',
				type: 1,
				is_bao: 1,
				is_fapiao: 1,
				take_times: '',
				bigthing: 1,
				takeinfo: '',
				orderprice: 0,
				user_coupons_id:''
			}
		},
		onShow() {
			this.initData1();
			this.initdata2();
			this.gettimelist();
			this.gettakeinfo();
			// this.getorderprice();
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//初始化数据
			initData1(){
				this.$common.requests('/api/shop/getconfigmsg').then(res => {
					if (res.data.code == 1) {
						this.takeinfo = res.data.data.takeinfo;
						this.song_fee = res.data.data.song_fee;
					}
				})
			},
			initdata2() {
				var obj = {
					address_id: this.address_id
				}
				this.$common.requests('/api/Shop/makeorder', obj).then(res => {
					if (res.data.code == 1) {
						this.address_id = res.data.data.id;
						this.addressinfo = res.data.data;
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			//确认支付
			makepayment() {
				var obj = {
					type: this.type,
					address_id: this.address_id,
					take_day: this.take_day,
					// is_bao: this.is_bao,
					// is_fapiao: this.is_fapiao,
					take_times: this.take_times,
					user_coupons_id: this.user_coupons_id,
					bigthing: this.bigthing,
					order_type:2
				}
				this.$common.requests('/api/Shop/addorder', obj).then(res => {
					if (res.data.code == 1) {
						if(res.data.data.length==0){
							this.modalName = 'shibaiM';
						}else{
							this.$api.msg(res.data.msg)
							this.modalName = null;
						}
					} else {
						this.$api.msg(res.data.msg)
						this.modalName = null;
					}
				})
			},
			wxPay(){
				var obj = {
					type: 2,
					address_id: this.address_id,
					take_day: this.take_day,
					// is_bao: this.is_bao,
					// is_fapiao: this.is_fapiao,
					take_times: this.take_times,
					user_coupons_id: this.user_coupons_id,
					bigthing: this.bigthing,
					order_type:2
				}
				this.$common.requests('/api/Shop/addorder', obj).then(res => {
					this.modalName = null;
					if (res.data.code == 1) {
						this.getpayparme(res.data.data.order_num)
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			//请求后台拿到相应参数
			getpayparme(order_num){
				var obj ={
					type:'wechat',
					method:'mp',
					order_num:order_num,
					status:2//1 充值 2支付订单
				}
				this.$common.requests('/addons/epay/index/experience',obj).then(res =>{
					
						console.log(res.data)
						this.onZhiFu(res.data)
						
				})
			},
			//调取微信支付
			onZhiFu(data) {
			   let [appId, timestamp, nonceStr, signature, packages, paySign] = [data.appId, data.timeStamp, data.nonceStr, data.signature,
			           data.package, data.paySign
			       ];
			    
			       jweixin.config({
			           debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			           appId, // 必填，公众号的唯一标识
			           timestamp, // 必填，生成签名的时间戳
			           nonceStr, // 必填，生成签名的随机串
			           signature, // 必填，签名，见附录1
			           jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			       });
			    
			       jweixin.ready(function() {
			           jweixin.chooseWXPay({
			               timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
			               nonceStr, // 支付签名随机串，不长于 32 位
			               'package': packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
			               signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
			               paySign, // 支付签名
			               success(res) {
			                   // 支付成功后的回调函数
			                   cb(res);
			               },
			               fail(res) {
			                   errorCb(res);
			               }
			           });
			       });
			    
			       jweixin.error(function(res) {
			           // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			           /*alert("config信息验证失败");*/
			       });
			   
			},
			//获取价格
			// getorderprice() {
			// 	var obj = {
			// 		is_bao: this.is_bao
			// 	}
			// 	this.$common.requests('/api/Shop/getorderprice', obj).then(res => {
			// 		if (res.data.code == 1) {
			// 			this.orderprice = res.data.data;
			// 		} else {
			// 			this.$api.msg(res.data.msg)
			// 		}
			// 	})
			// },
			//获取去送说明
			gettakeinfo() {
				this.$common.requests('/api/Shop/getconfigmsg').then(res => {
					if (res.data.code == 1) {
						this.takeinfo = res.data.data.takeinfo;
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			//选择地址
			goselectaddress() {
				uni.navigateTo({
					url: '../address/address?is_select=1'
				})
			},
			//获取时间段
			gettimelist() {
				this.$common.requests('/api/order/getquantum').then(res => {
					if (res.data.code == 1) {
						this.timeList = res.data.data;
						this.time = this.timeList[0];
						this.take_times = this.timeList[0];
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			//日期选择
			DateChange(e) {
				this.date = e.detail.value
				this.take_day = e.detail.value
			},
			//大件物品
			RadioChange(e) {
				this.radio = e.detail.value
				this.bigthing = this.radio
			},
			//是否保价
			SwitchA(e) {
				this.switchA = e.detail.value
				if (this.switchA) {
					this.is_bao = 2;
				} else {
					this.is_bao = 1;
				}
				// this.getorderprice();
			},
			//是否开发票
			SwitchB(e) {
				this.switchB = e.detail.value
				if (this.switchA) {
					this.is_bao = 2;
				} else {
					this.is_bao = 1;
				}
			},
			xuanzeTime(index, item) {
				this.timeStu = index;
				this.times = item;
				this.take_times = item;
			},
			qudingTime() {
				this.modalName = null;
				this.time = this.times;
				this.take_times = this.time;
			},
			//保价规则
			fineCleaning() {
				uni.navigateTo({
					url: '../baojia/baojia'
				})
			}
		}
	}
</script>

<style>
	.cu-dialog{
		width: 75%;
	}
	.padding-xl{
		padding: 20upx;
		color: #333333;
	}
	.padding-xl2{
		padding: 50upx 20upx;
	}
	.padding-xl3{
		height: 300upx;
		overflow-y: scroll;
	}
	.time_list{
		padding: 30upx 0;
	}
	.cuIcon-info{
		font-size: 20px;
		margin: 5upx 20upx 0 0;
	}
	.shuomings{
		padding:50upx 30upx;
	}
	.shuoming{
		padding: 10upx 0;
		text-align: left;
	}
	.bigs{
		font-size: 60upx;
	}
	.padding-xl .btns{
		width: 70%!important;
		margin: 50upx 15% 30upx 15%!important;
		padding: 21upx 0!important;
	}
	.shibai_img{
		width: 130upx;
		height: 125upx;
		margin-bottom: 30upx;
	}
	.content{
		width: 100%;
		height: 100vh;
		background: #F9F9F9;
		border-top: 1px solid #E6E6E6;
		overflow: hidden;
	}
	.top{
		align-items: flex-start;
		width: 100%;
		padding: 20upx 0;
		font-size: 24upx;
	}
	.topa{
		text-align: center;
		/* border: 1px solid red; */
	}
	.topa_img{
		width: 45upx;
		height: 45upx;
	}
	.topa_img1{
		width: 30upx;
	}
	.topa_img3{
		width: 35upx;
	}
	.jiantou{
		width: 22upx;
		height: 20upx;
		margin-top: 10upx;
	}
	.quyi{
		padding: 0 30upx;
		margin-top: 15upx;
		color: #333333;
	}
	.quyi_list{
		padding: 30upx 0;
	}
	.dizhi{
		width: 80upx;
		height: 80upx;
		margin-right: 50upx;
	}
	.small{
		font-size: 28upx;
	}
	.address{
		padding-top: 10upx;
	}
	.quyi_name{
		font-size: 30upx;
		color: #14C7CE;
	}
	.quyi_list1{
		border-top: 1px solid #E6E6E6;
	}
	.times{
		justify-content: flex-end;
		padding-top: 6upx;
		width: 65%;
		font-size: 30upx;
	}
	.list{
		margin-top: 15upx;
		padding: 20upx 30upx;
		color: #333333;
	}
	.list2{
		padding: 30upx;
	}
	.list_tit{
		margin-bottom: 10upx;
	}
	.list .flexs3 .flexs3{
		width: 20%;
	}
	.smallR{
		transform: scale(0.7);
		margin-right: 10upx;
	}
	.list .title{
		font-size: 28upx;
	}
	.cyan{
		transform: scale(0.7);
	}
	.btns{
		width: 76%;
		padding: 25upx 0;
		background: #14C7CE;
		border-radius: 15upx;
		font-size: 30upx;
		margin: 50upx 12%;
	}
	.pcss{
		font-size: 30upx;
		color: gray;
	}
	.timeColor{
		color: #14C7CE;
	}
	.text-cyan{
		color: #14C7CE;
	}
</style>
